<template>
	<view class="content">
		<uni-nav-bar color="#FFFFFF" backgroundColor="#0f85ff" class="uni-nav-bar" :title="title"></uni-nav-bar>
		<view class="uni-body">
			<swiper :current="tabIndex" class="swiper_box" duration="300" @change="changeTab">
				<swiper-item>
					<scroll-view class="body_item" scroll-y>
						<user-item @clickUser="clickMsgUser" :user="item" v-for="(item, index) in data.msguser" :key="index"/>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view class="body_item" scroll-y>
						<user-item @clickUser="clickUserList" :user="item" v-for="(item, index) in data.alluser" :type="2" :key="index"/>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view class="body_item user_info" scroll-y>
						<view class="header" v-if="data.csuser">
							<view class="image">
								<image :src="data.csuser.header_url ? config.serverUrl + data.csuser.header_url : default_img"></image>
							</view>
							<view class="name">
								昵称：{{data.csuser.nickname}}     账号：{{data.csuser.username}}
							</view>
							<view class="status" :type="data.csuser.status">
								分配状态：<text>{{data.csuser.status ? '开启分配' : '关闭分配'}}</text>
							</view>
							<view class="type" @tap="openSetType" :type="data.csuser.type">
								<uni-icon :size="16" :color="data.csuser.type == 1 ? 'green' : data.csuser.type == 2 ? 'yellow' : 'red'"
								 :type="data.csuser.type == 1 ? 'checkbox-filled' : data.csuser.type == 2 ? 'info-filled' : 'clear'"></uni-icon>
								{{data.csuser.type == 1 ? '当前在线' : data.csuser.type == 2 ? '当前忙碌' : '当前离线'}}
								<uni-icon :size="16" type="arrowright"></uni-icon>
							</view>
						</view>
						<view class="statis" v-if="data.statis">
							<view class="item">
								<view class="name">已沟通</view>
								<view class="value">{{data.statis.groupid}}</view>
							</view>
							<view class="item">
								<view class="name">未沟通</view>
								<view class="value">{{data.statis.ungroupid}}</view>
							</view>
							<view class="item">
								<view class="name">取关数</view>
								<view class="value">{{data.statis.ungroupid}}</view>
							</view>
							<view class="item">
								<view class="name">取关率</view>
								<view class="value">{{((data.statis.unsubscribe||0) / ((data.statis.subscribe||0) + (data.statis.unsubscribe||0)) * 100).toFixed(2) + '%'}}</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<uni-tab-bar :active="tabBarName" @clickLeft="tabbarClick"></uni-tab-bar>
	</view>
</template>

<script>
	import userItem from '../../components/user-item/user-item.vue'
	export default {
		data() {
			return {
				default_img: require('../../static/default.jpg'),
				title: '消息',
				tabBarName: 'index',
				tabIndex: 0,
				data: {}
			}
		},
		components: {
			userItem
		},
		async onShow() {
			// 判断是否登录
			//#ifdef H5
			window.index = this
			//#endif
			if (!this.$ws) {
				uni.redirectTo({url: '/pages/loading/loading'})
			} else {
				try {
					const csuser = uni.getStorageSync('csuser')
					if (!csuser) throw new Error('客服未登录')
				} catch (e) {
					uni.redirectTo({url: '/pages/login/login'})
				}
			}
			// 客服已登录
			var data = await this.$fn.loadingRes(this.$ws)
			if (data.status === 1) {
				this.data = data.data
				this.$forceUpdate()
			}
		},
		methods: {
			tabbarClick (index) {
				this.tabIndex = index
			},
			changeTab (event) {
				var index = event.detail.current
				this.tabBarName = index == 0 ? 'index' : index == 1 ? 'userlist' : index == 2 ? 'csuser' : ''
				this.title = index == 0 ? '消息' : index == 1 ? '联系人' : index == 2 ? '我的' : ''
			},
			clickMsgUser (user) {
				console.log(user)
			},
			clickUserList (user) {
				console.log(user)
			},
			openSetType () {
				var typelist = ['我在线上', '忙碌', '离线']
				uni.showActionSheet({
					itemList: typelist,
					success: res => {
						console.log('选中了第' + typelist[res.tapIndex] + '个按钮');
					},
					fail: res => {
						console.log(res.errMsg);
					}
				})
			}
		}
	}
</script>

<style>
	@import './style.css';
</style>
